<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>clock</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="clock.js"></script>
</head>
<body>
	<div style="width:800px;height:600px; margin:30px auto;border:1px solid #000;" id="clock"></div>
</body>
<script>		
	var options={
		el:'#clock',
		border:{
			type:"rectangle",
			setCircle:{
				radius:210,
				lineWidth:6,
				color:'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')'
			},
			setRectangle:{
				width:420,
				height:420,
				lineWidth:6,
				color:'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')'
			}
		},
		background:{
			isBackground:true,
			color:'#eee',
			image:'8.jpg'
		},
		needle:{
			second:{
				length:140,
				color:'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')',
				lineWidth:4,
				longOut:15
			},
			minute:{
				length:125,
				color:'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')',
				lineWidth:5,
				longOut:15
			},
			hour:{
				length:100,
				color:'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')',
				lineWidth:5,
				longOut:15
			},
		},
		dial:{
				isDial:true,//是否要刻度
				distance:2, //刻度与边界的距离
				maxLength:8,
				minLength:5,
				maxWidth:3,
				minWidth:2,
				color:'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')'
			},
		number:{
			isNumber:true,
			type:"roman",
			fontSize:'20px',
			radius:180,
			fontWeight:'bold',
			color:'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')'
		}
	}

	$.clock(options)
</script>
</html>